<template>
  <view style="position: relative">
    <u-navbar :is-back="false" title="个人中心"></u-navbar>
    <view class="head_wrap">
      <view style="width: 22%;display: inline-block">
        <u-avatar size="130" :src="user.avatar"></u-avatar>
      </view>
      <view style="width: 78%;display: inline-block">
        <view class="u-line-1 nickname">
          {{ user.nickname }}
        </view>
        <view class="u-line-1  username">
          账号名：{{ user.username }}
        </view>
        <view class="login_time">
          上次登录：{{ user.loginDate }}
        </view>
      </view>
    </view>

    <view class="body">
      <view style="position: absolute;left: 10%;top: 40%;width: 100%;display: flex">
        <view v-if="isLogin">
          <view @click="apply" v-if="showApply" style="padding: 20rpx;border: #FFFFFF solid;border-radius: 15px">
            立即领取
          </view>
          <view v-if="showApplying">正在审核中...</view>
          <view v-if="show" style="display: flex;width: 750rpx">
            <view style="width: 300px">
              <view class="item">姓名：{{ card.name }}</view>
              <view class="item">学号：{{ card.stuNumber }}</view>
              <view class="item">学院：{{ card.college }}</view>
            </view>
            <view style="width: 250px">
              <img style="width: 180rpx;height: 220rpx;margin-top: -5%"
                   :src="card.avatar"/>
            </view>
          </view>
        </view>
        <view v-else>
          <view @click="login" style="padding: 20rpx;border: #FFFFFF solid;border-radius: 15px">去登录</view>
        </view>

      </view>
    </view>
    <!--    <u-button @click="showLogout=true" :custom-style="{'width':'30%'}" size="medium" plain type="error">退出</u-button>-->
    <u-modal z-index="999" show-cancel-button @confirm="login" v-model="showLogin"
             content="您还未登录，是否去登录？"></u-modal>
  </view>
</template>
<script>

import UButton from "@/uview-ui/components/u-button/u-button.vue";
import images from "@/utils/images";
import UAvatar from "@/uview-ui/components/u-avatar/u-avatar.vue";
import config from "@/config";
import {allCardInfos} from "@/api/card/cardInfo";

export default {
  components: {UAvatar, UButton},
  data() {
    return {
      statusBarHeight: 0,
      config,
      images,
      user: {},
      card: {},
      showLogin: false,
      isLogin: false,
      showApply: false,
      showApplying: false,
      show: false,
    }
  },
  onShow() {
    if (this.$store.state.user.userId == '') {
      this.showLogin = true
      this.isLogin = false
    } else {
      this.user = this.$store.state.user
      this.isLogin = true
      allCardInfos({userId: this.$store.state.user.userId}).then(re => {
        if (re.data.length === 0) {
          this.showApply = true
          this.showApplying = false
          this.show = false
        } else {
          this.card = re.data[0]
          this.showApply = false
          if (this.card.status == 0) {
            this.showApplying = true
          } else {
            this.show = true
            this.showApplying = false
          }
        }
      })
    }
    uni.getSystemInfo({
      success: res => {
        this.statusBarHeight = res.statusBarHeight;
      }
    });
  },
  methods: {
    apply() {
      this.navigateTo("/pages/mine/index")
    },
    login() {
      uni.reLaunch({url: '/pages/login'})
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },

};
</script>

<style lang="scss" scoped>
.head_wrap {
  background-color: #940094;
  color: white;
  height: 200rpx;
  //display: flex;
  width: 100%;
  padding: 2% 2%;
  //background-color: #fdf5ec;
}

.body {
  position: relative;
  display: flex;
  color: white;
  width: 100%;
  height: 400rpx;
  background-image: url("https://njjtj.itssky.com:7991/profile/upload/2024/05/03/card_20240503184830A022.png");
  background-size: cover;
}

.item {
  font-size: 30rpx;
  font-weight: bold;
  padding-bottom: 20rpx
}

.nickname {
  font-weight: bold;
  font-size: 30rpx;
}

.username {
  font-size: 27rpx;
  font-weight: normal;
  margin-top: 2%
}

.login_time {
  font-size: 27rpx;
  font-weight: normal;
  margin-top: 2%
}
</style>
